<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>统一认证登录平台</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="chao hua oauth login page">
    <meta name="keywords" content="ch,oauth,login">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" th:href="@{/static/plugins/element-ui/lib/theme-chalk/index.css}">
    <script th:src="@{/static/plugins/vue.min.js}"></script>
    <script th:src="@{/static/plugins/element-ui/lib/index.js}"></script>
    <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
</head>
<body>
<div class="login-box" id="app">
    <el-form th:action="@{/login}" method="post" label-position="left" label-width="0px"
             class="demo-ruleForm login-container">
        <h2 class="title">统一认证登录平台</h2>
        <el-form-item>
            <el-input type="text" name="username" v-model="username" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="password" name="password" v-model="password" auto-complete="off"
                      placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item th:if="${param.error}">
            <span th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></span>
        </el-form-item>
        <el-form-item style="width:100%; text-align:center;">
            <el-button type="primary" style="width:47%;" @click.native.prevent="reset">重 置</el-button>
            <el-button type="primary" style="width:47%;" native-type="submit" :loading="loading">登 录</el-button>
        </el-form-item>
    </el-form>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            loading: false,
            username: 'admin',
            password: ''
        },
        methods: {
            reset: function () {
                this.username = 'admin';
                this.password = ''
            }
        }
    })

</script>

<style lang="scss" scoped>
    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 100px auto;
        width: 320px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .title {
        margin: 0px auto 20px auto;
        text-align: center;
        color: #505458;
    }
</style>

</html>
